<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<!--<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>-->
<!--<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>-->
<body class="gray-bg">
<div class="container-div ui-layout-center">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="user-form">
                <div class="select-list">
                    <ul>
                        <li>
                            物品名称：<input type="text" name="goodsName"/>
                        </li>
                        <li>
                            快递单号：<input type="text" name="expressNo"/>
                        </li>
                        <li>
                            快递公司：<select name="expressCompanyId" th:with="type=${@expressC.listExpressCompanys()}">
                            <option value="">所有</option>
                            <option th:each="ec : ${type}" th:text="${ec.expressCompanyName}" th:value="${ec.expressCompanyId}"></option>
                        </select>
                        </li>
                        <!--<li class="select-time">-->
                            <!--<label>创建时间： </label>-->
                            <!--<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>-->
                            <!--<span>-</span>-->
                            <!--<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>-->
                        <!--</li>-->
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" id="addOrderItem" onclick="$.operate.addOrderItemTmp()">
                <i class="fa fa-plus"></i> 新增包裹
            </a>
            <a class="btn btn-success" onclick="$.operate.addOrder()">
                <i class="fa fa-plus"></i> 加入订单
            </a>
            <a class="btn btn-primary btn-edit disabled" onclick="$.operate.editTab()">
                <i class="fa fa-edit"></i> 修改包裹
            </a>
            <a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()">
                <i class="fa fa-remove"></i> 删除
            </a>
        </div>

        <div class="col-sm-12 select-table table-striped ">
            <table id="bootstrap-table"  data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "transaction/order";

    $(function() {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({ initClosed: panehHidden, west__size: 185 });
        queryPackageList();
    });

    function queryPackageList() {
        var options = {
            url: prefix + "/listOrderItemTmp",
            createUrl: prefix + "/addOrderItemTmp",
            updateUrl: prefix + "/editOrderItemTmp/{id}",
            removeUrl: prefix + "/removeOrderItemTmp",
            exportUrl: prefix + "/export",
            importUrl: prefix + "/importData",
            importTemplateUrl: prefix + "/importTemplate",
            extendUrl:prefix + "/addOrder/{ids}",
            uniqueId:"orderItemId",
            sortOrder: "desc",
            modalName: "包裹",
//            rowStyle: function (row,index) {
//                var strClass='danger';
//
//                return {classes: 'bg-primary',css:{color:'black'}}
//
//            },
            detailView:false,
            detailFormatter:function(index,row,element){
                console.log("=="+row.remark);
                console.log(index+":"+row.goods_name);
                var html = [];
                html.push('</br><table class="table"><tr><th>快递公司</th><th>快递单号</th></tr>');
                html.push('<tr><td>申通</td><td>'+row.expressNo+'</td></tr></table>');
                return html.join('');
            },

            columns: [{
                checkbox: true
            },
                {
                    title: '编号',
                    formatter:function(value,row,index){
                        return index+1;
                    },
                    field:'orderItemId'
                },
                {
                    title: '类型',
                    formatter:function(value,row,index){
                        var html = [];
                        html.push('<p class="text-success"><d>代运</d></p>');
                        return html.join('');
                    }
                },
                {
                    field: 'expressCompanyName',
                    title: '快递公司'
                },
                {
                    field: 'expressNo',
                    title: '快递单号'

                },
                {
                    field: 'goodsName',
                    title: '物品名称'
                },
                {
                    field: 'qty',
                    title: '物品数量'
                },
                {
                    field: 'declaredValue',
                    title: '申报价值'
                },
                {
                    field:'remark',
                    title:'备注'
                },

                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="#" onclick="$.operate.editTab(\'' + row.orderItemId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="$.operate.remove(\'' + row.orderItemId + '\')"><i class="fa fa-remove"></i>删除</a> ');
                        return actions.join('');
                    }
                }]

        };
        $.table.init(options);
    }

    function queryDeptTree()
    {
        var url = ctx + "system/dept/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick : zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#deptId").val(treeNode.id);
            $("#parentId").val(treeNode.pId);
            $.table.search();
        }
    }

    $('#btnExpand').click(function() {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function() {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function() {
        queryDeptTree();
    });

    /* 用户管理-部门 */
    function dept() {
        var url = ctx + "system/dept";
        createMenuItem(url, "部门管理");
    }

    /* 用户管理-重置密码 */
    function resetPwd(userId) {
        var url = prefix + '/resetPwd/' + userId;
        $.modal.open("重置密码", url, '800', '300');
    }

    /* 用户状态显示 */
    function statusTools(row) {
        if (row.status == 1) {
            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.userId + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.userId + '\')"></i> ';
        }
    }

    /* 用户管理-停用 */
    function disable(userId) {
        $.modal.confirm("确认要停用用户吗？", function() {
            $.operate.post(prefix + "/changeStatus", { "userId": userId, "status": 1 });
        })
    }

    /* 用户管理启用 */
    function enable(userId) {
        $.modal.confirm("确认要启用用户吗？", function() {
            $.operate.post(prefix + "/changeStatus", { "userId": userId, "status": 0 });
        })
    }
</script>
</body>
<form id="importForm" enctype="multipart/form-data" class="mt20 mb10" style="display: none;">
    <div class="col-xs-offset-1">
        <input type="file" id="file" name="file"/>
        <div class="mt10 pt5">
            <input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据
            &nbsp;	<a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
        </div>
        <font color="red" class="pull-left mt10">
            提示：仅允许导入“xls”或“xlsx”格式文件！
        </font>
    </div>
</form>
</html>